document.addEventListener('DOMContentLoaded', () => {
    const dropdowns = document.querySelectorAll('.isat-dropdown');

    dropdowns.forEach((dropdown) => {
        const input = dropdown.querySelector('input');
        const options = dropdown.querySelector('.dropdown-options');
        const icon = dropdown.querySelector('.iconfont');

        // Toggle dropdown visibility and rotate icon
        input.addEventListener('click', (e) => {
            e.stopPropagation();
            // Check if the options are already active
            if (options.classList.contains('active')) {
                options.classList.remove('active');
                resetIconRotation(icon);
            } else {
                closeAllDropdowns();
                options.classList.add('active');
                toggleIconRotation(icon);
            }
        });

        // Handle option selection
        options.addEventListener('click', (e) => {
            if (e.target.tagName === 'DIV') {
                input.value = e.target.textContent.trim();
                options.classList.remove('active');
                resetIconRotation(icon);
            }
        });
    });

    // Close all dropdowns on clicking outside
    document.addEventListener('click', () => {
        closeAllDropdowns();
    });

    function closeAllDropdowns() {
        dropdowns.forEach((dropdown) => {
            const options = dropdown.querySelector('.dropdown-options');
            const icon = dropdown.querySelector('.iconfont');
            options.classList.remove('active');
            resetIconRotation(icon);
        });
    }

    function toggleIconRotation(icon) {
        icon.style.transform = icon.style.transform === 'rotate(180deg)' ? 'rotate(0deg)' : 'rotate(180deg)';
    }

    function resetIconRotation(icon) {
        icon.style.transform = 'rotate(0deg)';
    }
});